<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item
				label="路段"
				prop="roadName"
			>
				<el-input
					v-model="queryParams.roadName"
					placeholder="请输入路段"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item
				label="创建时间"
				prop="addTime"
			>
				<el-date-picker
					clearable
					size="small"
					v-model="queryParams.addTime"
					type="date"
					
					value-format="yyyy-MM-dd"
					placeholder="选择创建时间"
				>
				</el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
				>搜索</el-button>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
				>重置</el-button>
			</el-form-item>
		</el-form>

		<el-row
			:gutter="10"
			class="mb8"
		>
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['led:road:add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['led:road:edit']"
				>修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['led:road:remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['led:road:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="roadList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column
				type="selection"
				width="55"
				align="center"
			/>
			<el-table-column
				label="主键"
				align="center"
				prop="roadId"
			/>
			<el-table-column
				label="路段"
				align="center"
				prop="roadName"
			/>
			<el-table-column
				label="创建时间"
				align="center"
				prop="addTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="创建人"
						align="center"
				prop="createUser"
			>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['led:road:edit']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['led:road:remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改大屏路段管理对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="500px"
			append-to-body
		>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item
					label="路段"
					prop="roadName"
				>
					<el-input
						v-model="form.roadName"
						placeholder="请输入路段"
					/>
				</el-form-item>
				<!-- <el-form-item
					label="创建时间"
					prop="addTime"
				>
					<el-date-picker
						clearable
						size="small"
						v-model="form.addTime"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择创建时间"
					>
					</el-date-picker>
				</el-form-item> -->
			</el-form>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="primary"
					@click="submitForm"
				>确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listRoad,
		getRoad,
		delRoad,
		addRoad,
		updateRoad,
	} from "@/api/led/road";

	export default {
		name: "Road",
		components: {},
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 大屏路段管理表格数据
				roadList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					roadName: null,
					addTime: null,
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					roadName: [
						{
							required: true,
							message: "路段不能为空",
							trigger: "blur",
						},
					],
				},
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询大屏路段管理列表 */
			getList() {
				this.loading = true;
				listRoad(this.queryParams).then((response) => {
					console.log(response);
					this.roadList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					roadId: null,
					roadName: null,
					addTime: null,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.roadId);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加大屏路段管理";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const roadId = row.roadId || this.ids;
				getRoad(roadId).then((response) => {
					this.form = response.data;
					this.open = true;
					this.title = "修改大屏路段管理";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						if (this.form.roadId != null) {
							updateRoad(this.form).then((response) => {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addRoad(this.form).then((response) => {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const roadIds = row.roadId || this.ids;
				this.$confirm(
					'是否确认删除大屏路段管理编号为"' + roadIds + '"的数据项?',
					"警告",
					{
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}
				)
					.then(function () {
						return delRoad(roadIds);
					})
					.then(() => {
						this.getList();
						this.msgSuccess("删除成功");
					});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"led/road/export",
					{
						...this.queryParams,
					},
					`led_road.xlsx`
				);
			},
		},
	};
</script>